<form name="connectionForm" ng-submit="create()">

    <uib-tabset active="activeJustified" justified="true">
        <uib-tab index="0" ng-click="node.type='default'">
            <uib-tab-heading>
                DEFAULT
            </uib-tab-heading>
            <br>
            <div class="alert alert-info text-small">
                Konga will connect directly to Kong's admin API.<br>
                This method is mainly suitable for demo scenarios or internal access (ex. localhost).<br>
                Kong's admin API <strong class="text-danger">should not</strong> be publicly exposed.
            </div>

        </uib-tab>
        <uib-tab index="1" ng-click="node.type='key_auth'">
            <uib-tab-heading>
                KEY AUTH
            </uib-tab-heading>
            <br>
            <div class="alert alert-info text-small">
                Konga will connect to Kong's admin via an exposed "loop-back" API using key authentication.<br>
                 <a href="https://getkong.org/docs/latest/secure-admin-api/#kong-api-loopback" target="_blank">Check out how to setup an API key based "loop-back" API</a>.
            </div>

        </uib-tab>
        <uib-tab index="2" ng-click="node.type='jwt'">
            <uib-tab-heading>
                JWT AUTH
            </uib-tab-heading>
            <br>
            <div class="alert alert-info text-small">
                Konga will connect to Kong's admin via an exposed "loop-back" API using JWT authentication.<br>
                <a href="https://getkong.org/docs/latest/secure-admin-api/#kong-api-loopback" target="_blank">Check out how to setup a JWT based "loop-back" API</a>.
            </div>

        </uib-tab>
        <uib-tab index="3" ng-click="node.type='basic_auth'">
            <uib-tab-heading>
                BASIC AUTH
            </uib-tab-heading>
            <br>
            <div class="alert alert-info text-small">
                Konga will connect to Kong's admin using Basic authentication. It is strongly recommended to use SSL/TLS encryption on Kong.<br>
            </div>
        </uib-tab>
    </uib-tabset>
    <br>
    <div class="form-group" ng-class="{'has-error' : errors.name}">
        <label class="control-label">Name <span class="text-danger">*</span></label>
        <input ng-model="node.name" class="form-control" placeholder="A unique connection name" required="required">
        <div class="text-danger" ng-if="errors.name" data-ng-bind="errors.name"></div>
    </div>
    <div class="form-group" ng-class="{'has-error' : errors.kong_admin_url}">
        <label class="control-label">
            {{node.type == 'default' ? 'Kong Admin' : 'Loopback API'}} URL
            <span class="text-danger">*</span></label>
        <input type="url" ng-model="node.kong_admin_url" class="form-control" placeholder="The URL to Kong's {{node.type == 'default' ? 'admin' : 'Loopback'}} API" required="required">
        <div class="text-danger" ng-if="errors.kong_admin_url" data-ng-bind="errors.kong_admin_url"></div>
    </div>


    <div ng-switch="node.type">

        <div ng-switch-when="key_auth">
            <div class="form-group" ng-class="{'has-error' : errors.kong_api_key}">
                <label class="control-label">API KEY <span class="text-danger">*</span></label>
                <input ng-model="node.kong_api_key" ng-required="node.type=='api_key'" class="form-control" placeholder="The `apikey` ...">
                <div class="text-danger" ng-if="errors.kong_api_key" data-ng-bind="errors.kong_api_key"></div>

            </div>
        </div>
        <div ng-switch-when="jwt">
            <div class="form-group" ng-class="{'has-error' : errors.jwt_algorithm}">
                <label class="control-label">Algorithm</label>
                <select ng-model="node.jwt_algorithm" class="form-control">
                    <option value="HS256">HS256</option>
                    <option value="RS256">RS256</option>
                </select>
            </div>
            <div class="form-group" ng-class="{'has-error' : errors.jwt_key}">
                <label class="control-label">Key <span class="text-danger">*</span></label>
                <input ng-model="node.jwt_key" ng-required="node.type=='jwt'" class="form-control" placeholder="The JWT identification key">
                <div class="text-danger" ng-if="errors.jwt_key" data-ng-bind="errors.jwt_key"></div>
            </div>
            <div class="form-group" ng-class="{'has-error' : errors.jwt_secret}">
                <label class="control-label">Secret <span class="text-danger">*</span></label>
                <input ng-model="node.jwt_secret" ng-required="node.type=='jwt'" class="form-control" placeholder="The JWT secret">
                <div class="text-danger" ng-if="errors.jwt_secret" data-ng-bind="errors.jwt_secret"></div>
            </div>
        </div>
        <div ng-switch-when="basic_auth">
            <div class="form-group" ng-class="{'has-error' : errors.username}">
                <label class="control-label">Username <span class="text-danger">*</span></label>
                <input ng-model="node.username" ng-required="node.type=='basic_auth'" class="form-control" placeholder="The `Username` ...">
                <div class="text-danger" ng-if="errors.username" data-ng-bind="errors.username"></div>
            </div>
            <div class="form-group" ng-class="{'has-error' : errors.password}">
                <label class="control-label">Password <span class="text-danger">*</span></label>
                <input ng-model="node.password" ng-required="node.type=='basic_auth'" class="form-control" placeholder="The Basic Authentication Password" type="password">
                <div class="text-danger" ng-if="errors.password" data-ng-bind="errors.password"></div>
            </div>
        </div>
    </div>


    <br>
    <div class="form-group">
        <button type="submit" data-ng-disabled="busy" class="btn btn-primary btn-block">
            <i class="mdi mdi-check" ng-if="!busy"></i>
            <fading-circle-spinner class="spinner spinner-invert pull-left" ng-if="busy"></fading-circle-spinner>

            <span ng-if="busy && checkingConnection">Checking Connection</span>
            <span ng-if="busy && !checkingConnection">Creating</span>
            <span ng-if="!busy && !checkingConnection">create connection</span>
        </button>
    </div>
</form>